//var abtn=document.querySelectorAll(".box input");
//var ali=document.querySelectorAll(".ul li");
//for(let i=0;i<abtn.length;i++){
//		abtn[i].onclick=function(){
//			for(var j=0;j<abtn.length;j++){
//				abtn[j].className='';
//				ali[j].className='';
//			}
//			console.log(i)
//			this.className='active';
//			ali[i].className='show';
//	}
//}


class Tab{
	constructor(){
		this.abtn=document.querySelectorAll(".box input");
		this.ali=document.querySelectorAll(".ul li");
		this.show();
	}
	show(){
		var _this=this;
		for(let i=0;i<this.abtn.length;i++){
			this.abtn[i].onclick=function(){
				_this.fn(i);
			};
		}
	}
	fn(i){
		console.log(this)
		for(var j=0;j<this.abtn.length;j++){
			this.abtn[j].className='';
			this.ali[j].className='';
		}
		this.abtn[i].className='active';
		this.ali[i].className='show';
	}
}
new Tab()
